<template>
  <view class="page vedio">
    <!-- <view class="null" :style="{ height: statusBarHeight + 'px', background: '#000' }"></view> -->
    <!-- 视频列表 -->
    <swiper class="swiper" :style="{ height: '100%' }" vertical="true" v-if="selcetTabValue != 4"
      :current="currentVideo" @change="handleSwipeVertical" circular :indicator-dots="false" :autoplay="false"
      :interval="2000" :duration="500" @touchstart="onTouchstart" @touchend="onTouchend">
      <swiper-item class="swiperItem loading" v-if="!videlIdArr.length || !videoInfo.url">
        <ballLoading class="ml-10" :size="24" v-if="showVideoDialog"></ballLoading>
      </swiper-item>
      <template v-else>
        <swiper-item class="swiperItem" style="position: relative;" v-for="(item, index) in videlIdArr" :key="index">
          <!-- 只能使用v-show v-if会出现事件穿透的bug -->
          <view class="play flex-center" v-show="!isPlaying" @click="changeVidel">
            <image class="play_icon wh-56" src="https://cdn.oss.bon-top.cn/static_bc/images/play_icon.png" />
          </view>

          <video controls v-if="videoInfo.url?.length > 0 && currentVideo == index" :autoplay="true"
            :id="'vdplayer' + index" :src="videoInfo.url" :controls="false" :loop="true" :muted="isJin"
            :show-center-play-btn="false" object-fit="cover" :style="{ width: winWidth, height: '100%' }"
            @click.stop="changeVidel" :custom-cache="false" codec="h264" @timeupdate="handleTimeUpdate" @pause="onPause"
            @play="onPlay">
          </video>

          <view v-else style="background-color: black;width: 100%;height: 100%;"></view>
          <view class="slider">
            <view class="avtorBox "
              @click.stop="goInfo('/subpackage/teacher/teacherDetail?id=' + videoInfo?.sale_info?.id)">
              <view class="img_box flex-center">
                <view class="avtorBox_bg"></view>
                <image class="img" :src="videoInfo?.sale_info?.avatar" mode="aspectFill"></image>

              </view>
              <image class="img1" v-if="videoInfo?.sale_info?.is_official"
                src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image>
            </view>
            <view class="operate">

              <view class="operateItem">
                <!-- <zan></zan> -->
                <!-- 点赞 -->
                <!-- :class="dzClick ? 'pulse' : ''" -->
                <view class="tub flex-center" @tap="handleZan(videoInfo.id, videoInfo.is_like, 'video_id', videoInfo)">
                  <view class="tub_bg"></view>
                  <image class="imgs wh-32" :class="{ 'like': videoInfo.is_like && dzClick }"
                    src="https://cdn.oss.bon-top.cn/static_bc/images/like_act.png" v-if="videoInfo.is_like">
                  </image>
                  <image class="imgs wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/like.png" v-else></image>
                </view>
                <view class="wenz c-ff ft ft-24 fw-800">{{ videoInfo?.like_num || 0 }}</view>
                <!-- 评论 -->
                <view class="tub flex-center mt-8" @tap="openPup(videoInfo.id)">
                  <view class="tub_bg"></view>

                  <image class="imgs wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/oin.png"> </image>
                </view>
                <view class="wenz c-ff ft ft-24 fw-800">{{ videoInfo?.reply_num || 0 }}</view>
                <!-- 收藏 -->
                <view class="tub flex-center mt-8 mb-10"
                  @tap.stop="handleShouc(videoInfo.id, videoInfo.is_conllect, 'video_id')">
                  <view class="tub_bg"></view>

                  <image class="imgs wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/xin_act.png"
                    v-if="videoInfo.is_conllect">
                  </image>
                  <image class="imgs wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/xin.png" v-else></image>


                </view>
                <!-- 分享 -->
                <view class="tub share flex-center mt-24">
                  <view class="tub_bg"></view>

                  <image class="imgs wh-32 " src="https://cdn.oss.bon-top.cn/static_bc/images/zhuan.png"></image>
                  <button open-type="share" class="hidden-share-btn" @tap.stop="onCustomShare(videoInfo.id)"></button>

                </view>
              </view>
            </view>
          </view>
          <view class="bottom_titleModel">
            <view class="ft1 c-ff title">{{
              videoInfo?.product_info?.name
            }}</view>
            <view class="flex tips">
              <view class="ft ft-22 c-ff " v-for="(tag, index) in videoInfo?.product_info?.tags" :key="index">{{
                '#' + tag.name
              }}</view>
            </view>
            <!-- v-if="videoInfo?.product_id" -->
            <view class="more flex-center" v-if="videoInfo?.product_id" @tap.stop="goProject(videoInfo?.product_id)">
              <text class="ft c-ff mr-8">查看产品</text>
              <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left_cff.png"></image>
            </view>
            <!-- {{   }} -->
            <view class="collect_box flex" v-if="isShowCollect" @tap.stop="goPage('/subpackage/user/favoriteList')">
              <image class="wh-36 ml-30 mr-10" src="https://cdn.oss.bon-top.cn/static_bc/images/check.png"></image>
              <text class="ft-24 fw-800">已添加到 [我的-收藏]</text>
              <view class="backImg">
                <!-- <text class="ft-24" style="color: #DBF046;"> 去看看 </text> -->

                <image class="img" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png"></image>
              </view>
            </view>


          </view>
          <view class="jinyin_box flex-center" :style="{ top: navHeight + 'px', width: jinyinRight + 'px' }">

            <view class="jinyin flex-center" @tap.stop="isJin = !isJin">
              <view class="jinyin_bg"></view>
              <image class="wh-32 jinyin_img" src="https://cdn.oss.bon-top.cn/static_bc/images/jingyin.png"
                v-if="isJin">
              </image>
              <image class="wh-32 jinyin_img" src="https://cdn.oss.bon-top.cn/static_bc/images/jinyin_act.png" v-else>
              </image>
            </view>
          </view>

        </swiper-item>
      </template>
    </swiper>
    <view v-if="selcetTabValue == 4" class="player">
      <view class="card">
        <image class="live_bg" :src="liveList_one?.bg || 'https://cdn.oss.bon-top.cn/static_bc/images/live_bg.png'"
          mode="aspectFill"></image>
        <view class="kapian flex-center ft c-ff">
          <view class="kapian_bg"></view>
          <view class="kapian_item flex ft-22">
            <image class="wh-32 mr-8 kapian_img" src="https://cdn.oss.bon-top.cn/static_bc/images/icon6.png"
              mode="aspectFit"></image>
            {{ liveList_one?.countdown_str || "即将直播 | 倒计时:2天12时34分" }}
          </view>

        </view>
      </view>
      <view class="card2 pd-40">
        <view class="btnGroup flex">
          <view class="btn flex-center mr-20 ft" :class="{ active: selectBtn === item.id }"
            @click.stop="selcetButton(item.id)" v-for="item in btnGroup" :key="item.id">{{ item.name }}</view>
        </view>
        <view class="mt-20" style="height: 500rpx">
          <scroll-view scroll-top="0" scroll-y="true" class="scroll-Y">
            <view class="liveCard mb-20" v-if="selectBtn === 1" v-for="item in liveList" :key="item">
              <image class="live_bg" :src="item.bg" mode="aspectFill"></image>
              <view class="kapian flex-center ft c-ff">

                <view class="kapian_bg"></view>
                <view class="kapian_item flex ft-22">
                  <image class="wh-32 mr-8 kapian_img" src="https://cdn.oss.bon-top.cn/static_bc/images/icon6.png"
                    mode="aspectFit">
                  </image>
                  {{ item.countdown_str || "即将直播 | 倒计时:2天12时34分" }}
                </view>
              </view>
            </view>
            <view class="flex-start" v-if="selectBtn === 2">
              <view class="mb-20 mr-20 liveCard1" v-for="item in liveList" :key="item"
                @click.stop="goPage(`/pages/category/category?id=${item.id}&isReback=${true}`)">
                <image class="live_bg" :src="item.bg" mode="aspectFill"></image>

                <view class="kapian1  flex-center ft c-ff">
                  <view class="kapian_bg"></view>

                  <view class="kapian_item flex ft-22">
                    <image class="wh-32 mr-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon8.png"
                      mode="aspectFit">
                    </image>
                    <text>{{ item.countdown_str || "时长：01时34分" }}</text>
                  </view>

                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <view class="topBar pd-20 flex" :style="{ top: statusBarHeight + 'px' }">
      <view class="search flex-center ml-20" @tap.stop="goBack" v-if="isReback">
        <view class="topBar_search_bg"></view>
        <image class="search_img back" src="https://cdn.oss.bon-top.cn/static_bc/images/back_w.png"></image>
      </view>
      <view class="search flex-center ml-20" @click.stop="search" v-else>
        <view class="topBar_search_bg"></view>
        <image class="search_img" src="https://cdn.oss.bon-top.cn/static_bc/images/search.png"></image>
      </view>
      <view class="tabList flex ml-40">
        <view class="ft c-ff ft-28 mr-40" :class="{ active: selcetTabValue == item.id }"
          v-for="(item, index) in tabList" :key="item.id" @click.stop="selcetTab(item.id)">
          <text>{{ item.name }}</text>
          <view class="tabList_solid" v-if="selcetTabValue == item.id"></view>
        </view>
      </view>
    </view>
    <!-- 评论弹窗 showPin-->
    <up-popup :show="showPin" mode="bottom" :closeable="true" round="14" @close="closeP" @open="openP">
      <view class="offers" style="padding-top: 30rpx ;">
        <view class="offers_content">

          <view class="flex-bwt" style="padding: 0 30rpx;">
            <view class="ft1">{{ videoInfo?.reply_num }}条评论</view>
            <image class="wh-36 mr-56" v-if="isZoom" @click="setContentHeight()"
              src="https://cdn.oss.bon-top.cn/static_bc/images/zoom.png"></image>
            <image class="wh-36 mr-40" v-else @click="setContentHeight()"
              src="https://cdn.oss.bon-top.cn/static_bc/images/shrink.png"></image>
          </view>
          <view class="line mt-20"></view>
          <view class="content" :style="{ height: contentHeight + 'rpx' }">

            <scroll-view :scroll-top="scroll_top + 'rpx'" scroll-y="true" class="scroll-Y">
              <!-- 每一个评论项 -->
              <view class="caseCard" :class="`caseCard_${item.id}`" v-for="item in datas" :key="item.id">
                <view class="caseCard_content" @touchend="handleTouchEnd" :class="{ 'bgdColor': styleId == item.id }"
                  @longpress.stop="longpress(item)">
                  <!-- {{ item?.user_info?.sale_info }} -->
                  <view class="mt-24 flex-bwt1">
                    <view class="identity flex">
                      <view style="position: relative;width:70rpx;">
                        <image class="wh-72 mr-12" style="border-radius: 50%; z-index: 1" :src="item.user_info?.avatar"
                          mode="aspectFill">
                        </image>
                        <image class="wh-28 fs0" v-if="item?.user_info?.sale_info?.is_official" style="
                          border-radius: 50%;
                          position: absolute;
                          right: 0;
                          bottom: 0;
                          z-index: 3;
                        " src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png" mode="aspectFit"></image>
                      </view>

                      <view class="caseCard_content_mes" style="flex: 1;">
                        <view class="desc ml-20">
                          <view class="ft-24 te-1 c-99" style="width: 400rpx;white-space: nowrap;">{{
                            item.user_info?.nickname }}
                            <text class="isAuthor" v-if="item.is_author">作者</text>
                            <text class="isMy" v-else-if="item.is_my">我</text>
                          </view>
                          <view class="ft-28 mt-10" @click="openSbm(item.id, item.user_info?.nickname)">
                            {{ item.name }}
                          </view>
                          <view class="ft mt-12 ft-20 c-99" @click="openSbm(item.id, item.user_info?.nickname)">{{
                            item.ip_location }} · {{ item.created_at }} <text class="c-66 ml-12">回复</text> </view>
                        </view>
                      </view>
                      <view class="combination  ft mt-12">
                        <view class="flex-end" @click="handleZan(item.id, item.is_like, 'reply_id', item)">
                          <image class="wh-24 mr-12" v-if="item.is_like"
                            src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png"></image>
                          <image class="wh-24 mr-12" v-else
                            src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png">
                          </image>
                          <text class="ft">{{ item.like_num }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>

                <view class="caseCard_children">


                  <view class="nextCase">
                    <template v-for="child in item.children.slice(0, item.sliceVal)" :key="child.id">
                      <view class="caseCard_content" @touchend="handleTouchEnd" @longpress.stop="longpress(child)"
                        :class="{ 'bgdColor': styleId == child.id }">

                        <view class="mt-24 flex-bwt1">
                          <view class="identity flex">
                            <view style="position: relative;width:70rpx;">
                              <image class="wh-52 mr-12" style="border-radius: 50%; z-index: 1"
                                :src="child.user_info?.avatar"></image>
                              <image class="wh-24 mr-12" v-if="child?.user_info?.sale_info?.is_official" style="
                                border-radius: 50%;
                                position: absolute;
                                right: 0;
                                bottom: 0;
                                z-index: 3;" src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png">
                              </image>
                            </view>

                            <view class="caseCard_content_mes">
                              <view class="desc" style="flex: 1;">
                                <view class="ft1 flex fw-400">
                                  <view class="ft-22 c-66" style="white-space: nowrap;">
                                    {{ child.user_info?.nickname }}
                                    <text class="isAuthor" v-if="child.is_author">作者</text>
                                    <text class="isMy" v-else-if="child.is_my">我</text>
                                  </view>
                                  <view class="flex" v-if="child.p_info" style="flex: 1;">
                                    &nbsp;
                                    <u-icon name="play-right-fill" color="#666" size="12"></u-icon>
                                    &nbsp;
                                    <span class="te-1 te-1 ft-22 c-66" style="width: 200rpx">
                                      {{ child.p_info?.p_name }}
                                    </span>
                                  </view>
                                </view>
                                <view class="ft-24 mt-12" @click="openSbm(child.id, child.user_info?.nickname, '我是儿子')">
                                  {{ child.name }}
                                </view>
                                <view class="ft mt-12 ft-20 c-99"
                                  @click="openSbm(child.id, child.user_info?.nickname, '我是儿子')">{{ child.ip_location }}
                                  · {{ child.created_at }} 回复
                                </view>
                              </view>
                            </view>
                            <view class="combination  ft mt-12"
                              @click="handleZan(child.id, child.is_like, 'reply_id', child)">
                              <image class="wh-24 mr-12" v-if="child.is_like"
                                src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png"></image>
                              <image class="wh-24 mr-12" v-else
                                src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png">
                              </image>
                              <text class="ft">{{ child.like_num }}</text>
                            </view>
                          </view>
                        </view>
                      </view>
                    </template>
                  </view>
                  <view class="divider ft-24 c-66 flex ml-102 mt-20" @click="unfoldList(item, item.children.length)"
                    v-if="item.children.length > 0">

                    <view class="flex"
                      v-if="getResidueLengthFun(item.children?.length) && item.children.length > item.sliceVal">
                      <view style="width: 50rpx;border-top: 1rpx solid #999;margin-right: 10rpx;"></view>

                      <view>
                        <text v-if="item.sliceVal == 0">
                          展开
                          {{ getResidueLengthFun(item.children?.length) }}
                          条回复
                        </text>
                        <text v-else-if="item.sliceVal != 0 && item.children.length > item.sliceVal">展开更多</text>
                      </view>
                      <ballLoading class="ml-10" v-if="item.showDialog"></ballLoading>
                      <image class="divider_img" v-if="!item.showDialog"
                        src="https://cdn.oss.bon-top.cn/static_bc/images/icon15.png">
                      </image>
                    </view>
                    <view @click.stop="packUpList(item)"
                      v-if="!item.isUnfoldVal && !item.showDialog && item.sliceVal > 0">
                      收起
                      <image class="divider_img1" src="https://cdn.oss.bon-top.cn/static_bc/images/icon15.png">
                      </image>
                    </view>
                  </view>
                </view>
                <!-- <view class="line mt-30" style="border-bottom: 2rpx solid #f1f1f1; width: 650rpx"></view> -->
              </view>
              <!-- <view :style="{ height: (98 + 68) + 'rpx' }"></view> -->
            </scroll-view>
          </view>

        </view>

        <view class="btn_box">

          <view class="btn pd-10 flex">
            <!-- <up-input :placeholder="placeholderText" placeholderStyle="font-size: 28rpx;color: #D1D1D1;" border="none"
              @tap="showInput" disabled v-if="!show"></up-input> -->
            <view class="inputView" @tap="showInput" v-if="!show">
              <text class="ft-24 c-99">请文明用语</text>
            </view>
          </view>
        </view>
      </view>
    </up-popup>

  </view>
  <up-popup :show="showOption" mode="bottom" round="14" @close="closeOption">
    <view class="list_box">
      <view class="list_box_item name">


        {{ optionItem.user_info?.nickname + '：' +
          (optionItem.name?.length > 10 ? optionItem.name.slice(0, 10) + '...' : optionItem.name) }}

      </view>
      <view class="list_box_item" @tap.stop="openSbm(optionItem.id, optionItem.user_info?.nickname)">{{ '回复' }}</view>
      <view class="list_box_item" @tap.stop="closeOption">
        <up-copy :content="optionItem.name">
          <text class="btnItem">复制</text>
        </up-copy>
      </view>
      <view class="list_box_item" v-if="!optionItem.is_my" @tap.stop="openReport(optionItem.id)">{{ '举报' }}</view>

      <view class="list_box_item" v-else style="color: #FF0000;" @tap.stop="deleteOpen">{{ '删除' }}
      </view>
      <view class="list_box_item close" @tap.stop="closeOption">{{ '取消' }}</view>
    </view>
  </up-popup>
  <comAnswerPop :show="show" @close="close" @onReplay="sbmitHF" :replysName="placeholderText"></comAnswerPop>
  <comReportPopup :showReport="showReport" :reportId="reportId" :reportType="'reply_id'" @closeReport="closeReport"
    v-if="showReport">
  </comReportPopup>
  <dialogPop ref="diaLogPop" :show="showModal" title="删除" content='确定要删除当前评论吗?' @confirm='confirm' @cancel='cancel'>
  </dialogPop>
  <comTabBar :currentIndex="1"></comTabBar>

</template>

<script setup>
import { nextTick, onMounted, ref, getCurrentInstance, reactive } from "vue";
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
import { onHide, onLoad, onReady, onShareAppMessage, onShareTimeline, onUnload } from "@dcloudio/uni-app";
import comTabBar from "@/components/comTabBar.vue";
import comAnswerPop from "@/components/comAnswerPop.vue";
import ballLoading from "@/components/ballLoading.vue";
import comReportPopup from '@/components/comReportPopup.vue'
import dialogPop from '@/components/dialogPop.vue';

// import zan from "@/components/zan.vue";
let datasObj = reactive({
  title: '',
  img: '',
  color: '#FFFFFF',
  direction: '',
  scrollTop: 0,
  noBack: false,
  hideBack: true,
  height: 88
})
const isPlaying = ref(true);
const isJin = ref(true);
const showPin = ref(false); //弹出层控制
const liveList = ref([]);
const liveList_one = ref({});
// const liveType = ref(1)
const winWidth = ref("100%");
const winHeight = ref("100%");
const currentVideo = ref(0);
const progressBar = ref("");
const placeholderText = ref("请文明用语~");
const selcetTabValue = ref(1);
const show = ref(false);
const isFocus = ref(true);
const sliceVal = ref(0);

const deleteOpen = () => {
  showModal.value = !showModal.value
  closeOption()
}
const scroll_top = ref(0)
const bgColor = ref('#FFFFFF')
const scrollToElement = (id) => {
  nextTick(() => {
    setTimeout(() => {
      bgColor.value = '#FFFFFF'
      styleId.value = id
      setTimeout(() => {
        styleId.value = null
      }, 1000)
    }, 200)
  })

}

const showModal = ref(false)
// 删除评论
const confirm = () => {
  utils
    .request(
      api.deleteReply, {
      id: optionItem.value.id,
    },
      "post"
    )
    .then((res) => {
      showModal.value = false
      getReplyListFun(videoId.value)
      uni.showToast({
        title: '删除成功!',
        icon: 'none',
        duration: 2000
      })
    });
}
// 取消
const cancel = () => {
  showModal.value = false
}

const showOption = ref(false)
const optionItem = ref({})

const longpress = (item) => {
  optionItem.value = item
  showOption.value = true
  styleId.value = item.id

  // 弹出删除按钮
}
const itemStyle = ref('')
const closeOption = () => {
  showOption.value = false
}
const styleId = ref(null)


const handleTouchEnd = (e) => {
  styleId.value = null

  // itemStyle.value =
  //   ` backgroundColor: 'transparent'`

  // 弹出删除按钮
}
let showReport = ref(false)
const reportId = ref(null);
const closeReport = () => {
  showReport.value = false;
}
const openReport = (id) => {
  showReport.value = true;
  showOption.value = false
  reportId.value = id;
}

// 评论展开
const isUnfoldVal = ref(true)
// const liveList = ref([])
const getLiveListFun = () => {
  utils.request(api.getLiveList, { type: selectBtn.value }, 'get').then(res => {
    showVideoDialog.value = false
    liveList.value = res.data.items
    if (Object.keys(liveList_one.value).length == 0) liveList_one.value = liveList.value[0]

  })
}
const isReback = ref(false)
const goBack = () => {
  uni.navigateBack(-1)
}
const animation = ref(null)
const btnGroup = ref([
  { id: 1, name: "直播预告" },
  { id: 2, name: "回放" },
]);
const selectBtn = ref(1);
const showVideoDialog = ref(false)
const selcetTab = (idx) => {
  selcetTabValue.value = idx;
  currentVideo.value = 0
  clearVideo()
  showVideoDialog.value = true
  optionId.value = 0
  if (selcetTabValue.value == 4) {
    getLiveListFun()
  } else {

    getAllVideoIdListFun()
  }
};

const selcetButton = (idx) => {
  selectBtn.value = idx;
  getLiveListFun()
};
let textarea = ref(null)
const showInput = () => {
  show.value = true
  placeholderText.value = '请文明用语~'

};
const search = () => {
  uni.navigateTo({
    url: "/subpackage/search/search?type=video",
  });
};

const goProject = (id) => {
  uni.navigateTo({
    url: "/subpackage/immigration/immigration?id=" + id,
  });
};

const goInfo = (url) => {
  uni.navigateTo({ url: url, });
};

const closeP = () => {
  showPin.value = false;
  getProductVideoDetailFun()
};

const openP = () => {
  showPin.value = true;
};

const goReply = () => {
  uni.navigateTo({
    url: "/subpackage/search/reply",
  });
};
// 获取页面栈实例
const currentPages = getCurrentPages()
const currentRoute = currentPages[currentPages.length - 1]
const startTime = ref(0)
const secondsEnd = ref(0)
const shareConfig = ref({
  title: '',
  path: '',
  imageUrl: '',
  queryParams: {} // 当前页面参数
})
const _options = ref({})
// 初始化分享参数
const initShareParams = (id) => {
  // 获取当前页面参数
  const query = currentRoute.options || {}
  if (!query.share_user_id) {
    const userInfo = uni.getStorageSync("userInfo")
    // 用户id
    query.share_user_id = userInfo ? userInfo.id : ''
  }
  // 视频id
  query.id = id
  query.timestemp = parseInt((new Date().getTime()) / 1000)
  query.selcetTabValue = selcetTabValue.value


  const queryString = Object.keys(query)
    .map(key => `${key}=${query[key]}`)
    .join('&')

  // 更新分享配置
  shareConfig.value = {
    ...shareConfig.value,
    path: `${currentRoute.route}?${queryString}`,
    queryParams: query,

  }
}
// 自定义分享方法
const onCustomShare = (id) => {
  initShareParams(id)
}
// 好友分享配置
onShareAppMessage(() => ({
  title: shareConfig.value.title,
  path: shareConfig.value.path,
  imageUrl: shareConfig.value.imageUrl,
  success(res) {
    uni.$emit('shareSuccess', {
      type: 'friend',
      data: shareConfig.value.queryParams
    })
  }
}))

// 朋友圈分享配置（需基础库2.11.3+）
onShareTimeline(() => ({
  title: shareConfig.value.title,
  query: shareConfig.value.path.split('?') || '',
  imageUrl: shareConfig.value.imageUrl
}))
const contentHeight = ref(800)
const isZoom = ref(true)

// 收起评论
const setContentHeight = () => {
  if (contentHeight.value == 800) {
    contentHeight.value = 1100
    isZoom.value = false
  } else {
    contentHeight.value = 800
    isZoom.value = true
  }

}



const residueLength = ref(0)
// 处理评论还剩多少条
function getResidueLengthFun(leg) {
  let length = 0
  length = parseInt(leg - (sliceVal.value)) < 0 ? 0 : parseInt(leg - (sliceVal.value))
  residueLength.value = length
  return length
}

// 收起评论
const packUpList = (item) => {

  datas.value.forEach(f => {
    if (f.id == item.id) {
      f.sliceVal = 0
      f.isUnfoldVal = true
    }
  })


}
// 展开评论
// const showDialog = ref(false)
const unfoldList = (item, length) => {
  item.showDialog = true
  setTimeout(() => {
    item.sliceVal += 10
    item.isUnfoldVal = false
    item.showDialog = false
  }, 250)
  // if()
}
const parentId = ref(0)
const videoId = ref(0)
const value2 = ref('')
const flag = ref(true)

// 回复
const openSbm = (id, name, api, val = '空') => {
  closeOption()
  show.value = true
  // 父id 回复某人使用
  parentId.value = id
  placeholderText.value = '回复 @ ' + name
  apiType.value = api
}
// 评论
const sbmitHF = (val) => {
  if (!flag.value) return
  flag.value = false

  utils
    .request(
      api.commentReply, {
      parent_id: parentId.value,
      video_id: videoId.value,
      content: val,
      app_id: utils.app_id,
      identity: utils.identity,

    }, "post")
    .then((res) => {
      getReplyListFun(videoId.value)
      show.value = false
      flag.value = true
      value2.value = ''
      parentId.value = 0

    }).catch(err => {
      flag.value = true

    })

}
// 定义方法  
function open() {
  // 打开逻辑，比如设置 show 为 true  
  show.value = true;

}
const apiType = ref('video_id')
function close() {
  // 关闭逻辑，设置 show 为 false  
  show.value = false;
  value2.value = ''
  apiType.value = 'video_id'
  parentId.value = 0
  placeholderText.value = '请文明用语~'

}


const datas = ref([])
const boxInfo = ref({})


const mark_parent_id = ref(0)
//视频 评论列表接口
const getReplyListFun = async (id, isMonted = false) => {
  let obj = {
    app_id: utils.app_id,
    identity: utils.identity,
    video_id: id
  }
  utils
    .request(
      api.getReplyList, obj
      ,
      "get"
    )
    .then(async (res) => {
      boxInfo.value = res.data
      let _oldData = []
      if (Object.keys(datas.value).length) {
        _oldData = JSON.parse(JSON.stringify(datas.value))
        datas.value = res.data.items
        if (mark_parent_id.value) {
          const res = await utils.request(
            api.getReplyList,
            { id: mark_parent_id.value },
            "get"
          );
          let index = datas.value.findIndex(f => f.id == mark_parent_id.value)
          // 判断当前数据是否已经是第一位
          if (index != -1 && index != 0) {
            let find = res.data.items
            datas.value[index] = datas.value[index].filter(f => f.id != mark_parent_id.value)

            if (find.length > 0) {
              datas.value.unshift(find[0])
            }
          }

        }
        datas.value.forEach((item, index) => {
          let find = _oldData.find(f => f.id == item.id)

          if (find) {
            for (let key in find) {
              if (key !== 'children' && key != 'user_info') item[key] = find[key]
              item.isUnfoldVal = find.isUnfoldVal ?? item.children.length > 0
            }
          } else {
            item.sliceVal = 0
            item.showDialog = false
            item.isUnfoldVal = true
          }

        })
      } else {

        datas.value = res.data.items
        // 处理从评论提醒 / 点赞 跳转过来的数据展示
        // 评论id mark_parent_id

        if (mark_parent_id.value) {
          const res = await utils.request(
            api.getReplyList,
            { id: mark_parent_id.value },
            "get"
          );
          let find = res.data.items
          if (find.length > 0) {
            /**
             * 当 sliceVal>0 并且 isUnfoldVal = false 则为点击了展开 
             * 要在打开评论列表式 处理展开数据
             * 1.拿到当前id是 父级还是子级
             * 2.拿到当前id所在索引
             * 3.设置 sliceVal为id所在索引
             * 4.将评论id的数据展示到首位显示*/

            // 判断当前数据为子级 并拿到数据 
            if (mark_id.value != mark_parent_id.value) {
              let index = find[0].children.findIndex(f => f.id == mark_id.value)
              // 如果当前评论不是首位 则换到首位
              if (index != -1 && index != 0) {
                let _findChild = find[0].children.find(f => f.id == mark_id.value)
                find[0].children = find[0].children.filter(f => f.id != mark_id.value)
                find[0].children.unshift(_findChild)
              }

            }
            let index = datas.value.findIndex(f => f.id == mark_parent_id.value)
            // 判断当前数据是否已经是第一位
            if (index != -1 && index != 0) {
              let find = res.data.items
              datas.value = datas.value.filter(f => f.id != mark_parent_id.value)

              if (find.length > 0) {
                datas.value.unshift(find[0])
              }
            }
          }

        }
        datas.value.forEach(item => {
          item.isMore = false
          item.isUnfoldVal = item.children.length > 0

          if (isMonted) {
            item.sliceVal = 0
            item.showDialog = false
          }
          // 如果当前是评论跳转 则展开
          if (mark_parent_id.value == item.id) {
            unfoldList(item, item.children.length)
            setTimeout(() => {

              scrollToElement(mark_id.value)
            }, 500)
          }

        })

      }

    });
};

const openPup = (id) => {
  showPin.value = true;
  videoId.value = id
  getReplyListFun(id, true)


};

const handleTimeUpdate = (e) => {
  let { currentTime, duration } = e.detail;

  progressBar.value = parseInt(
    (currentTime / duration).toFixed(2) * parseInt(winWidth.value)
  );
};

const getVideoCtx = () => {
  return uni.createVideoContext("vdplayer" + currentVideo.value, this)
};

const videoRefs = ref({});
const dzClick = ref(false)
// 点赞
const flags = ref(true)
const zanCount = ref(0)
const zanTime = ref('')
const maxTime = ref(30)
const isClick = ref(false)
const handleZan = (id, islike, key = '', item) => {

  let time = (parseInt(Date.now()) - parseInt(zanTime.value)) / 1000
  if (time < maxTime.value && zanCount.value > 10) {
    uni.showToast({ title: '操作过于频繁请稍后再试~', icon: 'none' })
    return flags.value = false
  } else if (time > maxTime.value) {
    zanTime.value = ''
    flags.value = true
    zanCount.value = 0
  }
  if (!flags.value) return
  flags.value = !flags.value
  zanCount.value++
  if (!zanTime.value) zanTime.value = Date.now()

  let _api = ['like', 'cancelLike']
  if (key == 'video_id') dzClick.value = !islike
  utils
    .request(
      api[_api[islike]],
      {
        [key]: id,
      },
      "post"
    )
    .then((res) => {

      if (key == 'reply_id') {
        // getReplyListFun(videoId.value)
      } else {
        // getProductVideoDetailFun(1)
      }
      flags.value = !flags.value
      if (_api[islike] == 'like') {
        item.is_like = 1
        item.like_num++
      } else {
        item.is_like = 0
        item.like_num--

      }

    })


}

// 处理播放按钮
const onPause = () => {
  isPlaying.value = false
  console.log('暂停播放触发bindpause')
}
const onPlay = () => {
  isPlaying.value = true
  console.log('开发播放触发bindpause')
}

// 点击 播放/暂停播放
const changeVidel = () => {

  if (isPlaying.value) {
    handlePause()

  } else {
    handlePlay()

  }

}
// 播放
const handlePlay = () => {
  let video = getVideoCtx();
  if (!video) return;
  video.play();
  isPlaying.value = true;

};
// 暂停
const handlePause = () => {
  let video = getVideoCtx();
  if (!video) return;
  video.pause();
  isPlaying.value = false;
};

// 收藏 / 取消收藏
const isShouc = ref(false)
const isShowCollect = ref(false)
const handleShouc = (id, islike, key = '') => {
  // isShouc.value = true
  let _api = ['collect', 'cancelCollect']
  utils
    .request(
      api[_api[islike]],
      {
        [key]: id,
      },
      "post"
    )
    .then((res) => {
      if (!islike) {
        isShowCollect.value = true
        setTimeout(() => {
          isShowCollect.value = !isShowCollect.value

        }, 2000)
      } else {
        uni.showToast({ title: '已取消收藏', icon: 'none' })
      }

      getProductVideoDetailFun(1)

    })


}

const startPageY = ref(0)
const endPageY = ref(0)
const oldIndex = ref(0)
const direction = ref('up')
// 手指按下
const onTouchstart = (e) => {
  startPageY.value = e.changedTouches[0].pageY
}
// 滑动视频松开时执行新视频获取
const onTouchend = (e) => {
  endPageY.value = e.changedTouches[0].pageY
  let isSlide = Math.abs(endPageY.value - startPageY.value)
  direction.value = startPageY.value > endPageY.value ? 'up' : 'down'
  if (isSlide < 30) return

  // 切换视频 触发浏览接口
  if (_options.id !== videlId.value) shareVisit()
  // 如果当前视频切换 执行新视频更新接口
  if (oldIndex.value !== currentVideo.value) {
    oldIndex.value = currentVideo.value
    videoInfo.value = []
    getProductVideoDetailFun()
    utils.request(
      api.getProductVideoDetail
      , {
        id: videlId.value,
        // is_preview: 1,
      }, 'get').then((res) => {
        // nextVideoInfo.value = res.data.info
      })


  }

}
const videoInfo = ref({})
const nextVideoInfo = ref({})
// 获取视频详情
const getProductVideoDetailFun = async (type = 0) => {
  let id = direction.value == 'up' ? videlIdArr.value[currentVideo.value + 1] : videlIdArr.value[currentVideo.value]
  // 第一次拿取视频
  if (direction.value == 'down') {
    nextVideoInfo.value = {}
    await utils.request(
      api.getProductVideoDetail
      , {
        id: videlId.value
      }, 'get').then((res) => {
        videoInfo.value = res.data.info
        showVideoDialog.value = false

      })
  } else {
    // 第一次进入请求  拿到第一个视频数据
    if (!Object.keys(nextVideoInfo.value).length || type) {
      await utils.request(
        api.getProductVideoDetail
        , {
          id: videlId.value
        }, 'get').then((res) => {
          showVideoDialog.value = false

          nextVideoInfo.value = res.data.info
          videoInfo.value = nextVideoInfo.value
          if (!type) getProductVideoDetailFun()
        })

    } else {
      getNextVideo(id)
    }
  }

}

const getNextVideo = async (id) => {
  // 预缓存下一个视频
  videoInfo.value = nextVideoInfo.value
  if (!id) return nextVideoInfo.value = []
  await utils.request(
    api.getProductVideoDetail
    , {
      id: id,
      is_preview: 1,
    }, 'get').then((res) => {
      nextVideoInfo.value = res.data.info
    })
}
const clearVideo = () => {
  videlIdArr.value = []
  nextVideoInfo.value = []
  videoInfo.value = []
  videlId.value = 0
  direction.value = 'up'

}

const videlId = ref(null)
const handleSwipeVertical = (e) => {
  const previousVideoIndex = currentVideo.value;
  currentVideo.value = e.detail.current;
  const previousVideoRef = videoRefs.value[previousVideoIndex];

  if (previousVideoRef) previousVideoRef.pause();

  // 滑动时 获取视频
  videlId.value = videlIdArr.value[currentVideo.value]

};

// 获取videl 的id集合
const videlIdArr = ref([])
const getAllVideoIdListFun = async () => {
  await utils.request(
    api.getAllVideoIdList
    , {
      type: selcetTabValue.value,
      app_id: utils.app_id,
      identity: utils.identity,
    }, 'get').then((res) => {
      videlIdArr.value = res.data || []
      videlId.value = videlIdArr.value[currentVideo.value]
      if (optionId.value) {
        videlId.value = optionId.value

        currentVideo.value = videlIdArr.value.findIndex(f => f == videlId.value)
      }

      getProductVideoDetailFun()

    })

}


const tabList = ref([
  { id: 1, name: "推荐" },
  { id: 2, name: "移民" },
  { id: 3, name: "留学" },
  { id: 4, name: "直播" },
]);
const goPage = (url) => {
  uni.navigateTo({ url: url })
}
const optionId = ref(null)
const mark_id = ref(0)
onLoad(async (option) => {
  if (option.isReback) isReback.value = option.isReback == 'true' ? true : false


  // 通过分享页进入
  /**
   * 通过分享进来 直接播放分享的视频 并调用浏览接口*/
  if (option?.id && option?.share_user_id) {
    /**
     * 通过分享进来时 开始计时浏览时间*/
    startTime.value = Math.floor(Date.now() / 1000)
    _options.value = option

    _options.value.seconds = startTime.value
    selcetTabValue.value = option.selcetTabValue


  }

  if (option.type == 'live') {
    selcetTabValue.value = 4
    getLiveListFun()

  }
  getAllVideoIdListFun()
  if (option.id) {
    // 视频id
    optionId.value = option.id
    videoId.value = option.id
    if (option.mark_parent_id || option.mark_id) {
      const res = await utils.request(
        api.getReplyList,
        { id: option.mark_parent_id },
        "get"
      );
      let index = 1
      // 当前评论非顶级
      if (option.mark_parent_id != option.mark_id) {

        index = res.data.items[0]?.children.findIndex(f => f.id == option.mark_id)
      }
      if (!res.data.items.length || (option.mark_id && index == -1)) return uni.showToast({
        title: '该评论已无法查看',
        icon: 'none',
      })

      // 处理从视频评论
      // 评论id
      mark_parent_id.value = option.mark_parent_id
      //评论的id
      mark_id.value = option.mark_id
      showPin.value = true;
      getReplyListFun(optionId.value, true)
    }


  }

})
const statusBarHeight = ref(44)
const navHeight = ref(88)
const jinyinRight = ref(40)
onReady(() => {
  setTimeout(() => {
    nextTick(() => {
      const systemInfo = uni.getSystemInfoSync()
      let screenWidth = systemInfo.screenWidth

      statusBarHeight.value = parseInt(systemInfo.statusBarHeight)
      let menuButtonInfo = 0
      // #ifdef MP
      menuButtonInfo = wx.getMenuButtonBoundingClientRect();
      // #endif
      navHeight.value = parseInt(statusBarHeight.value + menuButtonInfo.height) + 30
      let width = (screenWidth - menuButtonInfo.right) + menuButtonInfo.width
      jinyinRight.value = width
    })
  }, 500)

})
const isSharVisit = ref(false)
// 访客浏览触发接口
const shareVisit = () => {

  // 不是分享 不触发接口
  if (!_options.value.share_user_id) return

  // 浏览时间
  let duration = Math.floor(Date.now() / 1000) - startTime.value

  let obj = {
    share_user_id: _options.value.share_user_id,
    timestemp: _options.value.timestemp,
    video_id: _options.value.id,
    seconds: duration
  }

  if (_options.value.share_user_id && !isSharVisit.value) {
    utils
      .request(
        api.shareVisit, obj, "post"
      )
      .then((res) => {
        isSharVisit.value = true

      });
  }
}
//页面清除时
onUnload(() => {
  //页面关闭 调用浏览接口
  shareVisit()
})


</script>

<style lang="scss" scoped>
video {
  position: relative !important;
  z-index: 1 !important;
  transform: translateZ(0);

  /* 触发硬件加速 */
}

.swiper {
  height: 100%;
  width: 100%;
  background: #000;
}

.vedio {
  width: 100%;
  // height: 1458rpx;
  position: relative;
  height: calc(100vh - 166rpx);
  padding: 0;
  margin: 0;

  .null {
    // position: absolute;
    // top: 0;
    padding: 0;
    margin: 0;
    // padding-bottom: env(safe-area-inset-bottom);
  }

  .player {
    height: 1450rpx;
    background: #65675c;
    border: #65675c solid 2rpx;

    .card {
      width: 690rpx;
      height: 604rpx;
      // background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/live_bg.png");
      background-size: 100% 100%;
      margin: auto;
      margin-top: 200rpx;
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      position: relative;
      overflow: hidden;

      .live_bg {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }

      .kapian {
        width: 384rpx;
        height: 52rpx;
        border-radius: 40rpx;
        position: absolute;
        top: 20rpx;
        left: 20rpx;

        .kapian_bg {
          width: 100%;
          height: 100%;
          border-radius: 40rpx;
          background-color: rgba(255, 255, 255, 0.4);
          backdrop-filter: blur(30rpx);
          position: absolute;

        }

        .kapian_item {
          width: 100%;
          height: 100%;
          position: absolute;
          padding: 0 10rpx;
          justify-content: flex-start;
          box-sizing: border-box;

        }
      }
    }

    .card2 {
      width: 750rpx;
      height: 649rpx;
      background: #f8f8f8;
      border-radius: 40rpx 40rpx 0rpx 0rpx;

      .btnGroup {
        .btn {
          width: 152rpx;
          height: 72rpx;
          background: #f1f1f1;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          color: #666;

        }

        .active {
          background: #333333;
          font-size: 28rpx;
          color: #ffffff;
        }
      }

      .scroll-Y {
        height: 100%;
      }

      .liveCard {
        width: 670rpx;
        height: 382rpx;
        border-radius: 40rpx;
        // background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/live_bg.png");
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;


        .live_bg {
          position: relative;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
        }

        .kapian {
          width: 384rpx;
          height: 52rpx;
          border-radius: 40rpx;
          position: absolute;
          top: 20rpx;
          left: 20rpx;

          .kapian_bg {
            width: 100%;
            height: 100%;
            border-radius: 40rpx;
            background-color: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(30rpx);
            position: absolute;

          }

          .kapian_item {
            width: 100%;
            height: 100%;
            position: absolute;
            padding: 0 10rpx;
            justify-content: flex-start;
            box-sizing: border-box;

          }
        }
      }

      .liveCard1 {
        width: 314rpx;
        height: 184rpx;
        // background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/live_bg.png");
        background-size: 100% 100%;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        flex-wrap: wrap;
        position: relative;
        overflow: hidden;

        .live_bg {
          position: relative;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
        }

        .kapian1 {
          width: 256rpx;
          height: 52rpx;
          border-radius: 44rpx;
          position: absolute;
          top: 20rpx;
          left: 20rpx;

          .kapian_bg {
            width: 100%;
            height: 100%;
            border-radius: 40rpx;
            background-color: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(30rpx);
            position: absolute;

          }

          .kapian_item {
            width: 100%;
            height: 100%;
            position: absolute;
            padding: 0 10rpx;
            justify-content: flex-start;
            box-sizing: border-box;

          }
        }
      }
    }
  }

  .topBar {
    position: absolute;
    top: 88rpx;
    height: 88rpx;
    width: 100%;

    .search {
      width: 72rpx;
      height: 52rpx;
      border-radius: 20rpx;
      position: relative;


      .topBar_search_bg {
        width: 72rpx;
        height: 52rpx;
        background: #000000;
        border-radius: 20rpx;
        opacity: 0.44;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }

      .search_img {
        position: absolute;
        z-index: 2;
        width: 32rpx;
        height: 32rpx;

      }

      .back {
        width: 26rpx;
        height: 40rpx;
        margin-right: 2rpx;
      }
    }

    .active {
      font-size: 32rpx;
      font-weight: 800;
      // border-bottom: 4rpx solid #dbf046;
    }

    .tabList {

      .tabList_solid {
        width: 100%;
        height: 12rpx;
        background-color: #dbf046;
        border-radius: 18rpx;
        margin-top: -8rpx;
      }


    }
  }

  .loading {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .swiperItem {
    height: 800rpx;
    position: relative;

    .slider {
      width: 100rpx;
      position: absolute;
      right: 30rpx;
      top: 636rpx;
      // border: 2rpx solid red;
      display: flex;
      flex-direction: column;
      justify-content: center;
      z-index: 9999 !important;

      .avtorBox {
        width: 100rpx;
        height: 100rpx;
        position: relative;

        .img_box {
          width: 100rpx;
          height: 100rpx;
          position: relative;
          border-radius: 50%;
          overflow: hidden;

        }

        .avtorBox_bg {
          width: 120rpx;
          height: 120rpx;
          background: #FFFFFF;
          filter: blur(25rpx);
          position: relative;
          border-radius: 50%;


        }

        .img {
          // top: 0;
          // left: 0;
          width: 84rpx;
          height: 84rpx;
          border-radius: 50%;
          position: absolute;
        }

        .img1 {
          position: absolute;
          width: 24rpx;
          height: 22rpx;
          bottom: 8rpx;
          right: 8rpx;
        }
      }

      .operate {
        width: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        position: relative;

        .operateItem {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          position: relative;
          width: 100%;
          height: 100%;

          .pulse {
            -webkit-animation: pulse 1s;
            animation: pulse 1s;
            box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
          }

          .pulse2 {
            -webkit-animation: pulse 1s;
            animation: pulse2 1s;
            // box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
          }

          .like {

            animation: heartButton .6s
          }

          @keyframes heartButton {
            0% {
              transform: scale(1);
            }

            60% {
              transform: scale(1.3);
            }

            100% {
              transform: scale(1);
            }
          }

          @keyframes pulse2 {
            0% {
              transform: scale(0);
              opacity: 1;
            }


            100% {
              transform: scale(1.5);
              opacity: 0;
            }
          }

          // @-webkit-keyframes pulse {
          //   0% {
          //     box-shadow: 0 0 0 0 var(--hover);
          //   }
          // }

          @keyframes pulse {
            0% {
              box-shadow: 0 0 0 0 var(--hover);
            }
          }


        }

        .pulse {
          --color: #ef6eae;
          --hover: #DBF046;
        }

        .tub {
          width: 68rpx;
          height: 68rpx;
          border-radius: 40rpx;
          position: relative;
          margin-top: 20rpx;

          // opacity: 0.5;
          .tub_bg {
            width: 68rpx;
            height: 68rpx;
            background: #000000;
            opacity: 0.5;
            border-radius: 40rpx;
            position: relative;

          }

          .imgs {
            width: 36rpx;
            height: 36rpx;
            position: absolute;
          }
        }



        .share {
          position: relative;

          .hidden-share-btn {
            opacity: 0;
            position: absolute;
            width: 68rpx;
            height: 68rpx;
            left: 0;
            top: 0;
          }
        }

      }
    }

    .bottom_titleModel {
      width: 100%;
      height: 256rpx;
      background: linear-gradient(to top, #000000, #000000 0%, rgba(0, 0, 0, 0) 100%);
      box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
      position: absolute;
      left: 0;
      // bottom: 30rpx;
      bottom: 0;
      z-index: 10;

      .collect_box {
        position: absolute;
        bottom: 20rpx;
        left: 30rpx;
        width: 690rpx;
        height: 98rpx;
        background: #fff;
        border-radius: 20rpx;
        z-index: 10;
        color: #333;

        .backImg {

          margin-left: auto;
          margin-right: 30rpx;

          .img {
            width: 22rpx;
            height: 34rpx;
            transform: rotate(180deg);
          }
        }

      }

    }

    .title {
      position: absolute;
      bottom: 182rpx;
      left: 30rpx;
      z-index: 10;

    }

    .tips {
      position: absolute;
      bottom: 138rpx;
      left: 30rpx;
      z-index: 10;
    }

    .jinyin_box {
      position: absolute;
      z-index: 10;
      height: 52rpx;
      right: 0;
      // background-color: red;

      .jinyin {
        width: 52rpx;
        height: 52rpx;
        border-radius: 40rpx;
        // left: 30rpx;
        // bottom: 256rpx;
        position: absolute;

        .jinyin_img {
          position: absolute;

        }
      }

      .jinyin_bg {
        width: 52rpx;
        height: 52rpx;
        background: #000000;
        position: absolute;
        opacity: 0.44;
        border-radius: 40rpx;

      }
    }


    .more {
      position: absolute;
      bottom: 20rpx;
      left: 30rpx;
      width: 690rpx;
      height: 78rpx;
      background: #5b5c5b;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      z-index: 10;

    }
  }
}

.offers {
  // height: 1348rpx;
  background: #fff;
  border-radius: 20rpx;

  .line {
    width: 670rpx;
    height: 0rpx;
    border-bottom: 2rpx solid #f1f1f1;
  }

  .content {
    // height: 1178rpx;
    width: 100%;
    // background: rgb(119, 0, 255);

    // border: 2rpx solid red;
    .scroll-Y {
      height: 100%;
    }

    .caseCard {
      // background: #f8f8f8;
      background: #fff;
      // border-radius: 40rpx 40rpx 40rpx 40rpx;
      overflow: hidden;

      // padding-top: 10rpx;
      .isMy {
        display: inline-block;
        padding: 2rpx 8rpx;
        color: #6a696b;
        background: #F3F3F3;
        border-radius: 4rpx;
        font-size: 22rpx;
        margin-left: 8rpx;
        flex-basis: auto;

      }

      .isAuthor {
        display: inline-block;
        padding: 0 8rpx;
        color: #fff;
        background: #FE3256;
        border-radius: 4rpx;
        font-size: 20rpx;
        margin-left: 8rpx;
        flex-basis: auto;

      }

      &_content {
        padding: 10rpx 30rpx;
        box-sizing: border-box;
        // background-color: brown;

      }

      .identity {
        width: 100%;
        box-sizing: border-box;
        align-items: flex-start;
        // background-color: red;

      }

      .combination {
        width: 172rpx;
        height: 54rpx;
        // background: #ffffff;
        border-radius: 28rpx 28rpx 28rpx 28rpx;
        text-align: right;

      }

      .line {
        width: 446rpx;
        height: 0rpx;
        border-bottom: 2rpx solid #f1f1f1;
      }

      .nextCase {
        // width: 562rpx;
        // background: #ffffff;
        box-sizing: border-box;
        overflow: hidden;

        .caseCard_content {
          // padding-left: 108rpx;
          padding: 20rpx 30rpx 6rpx 108rpx;
          box-sizing: border-box;
          // padding-left: 48rpx;
        }

        .identity {
          width: 100%;
        }

        .caseCard_content_mes {
          flex: 1;

        }

        .combination {
          width: 100rpx;
        }

        .casess {
          width: 160rpx;
          height: 54rpx;
          background: #f8f8f8;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
        }



      }

      .divider {
        // background-color: red;


        .divider_img {
          width: 35rpx;
          height: 18rpx;
          margin-top: 4rpx;
          margin-right: 50rpx;
        }

        .divider_img1 {
          width: 35rpx;
          height: 18rpx;
          margin-top: 4rpx;
          transform: rotate(180deg);
        }
      }
    }
  }

  .btn_box {
    box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
    padding: 10rpx 30rpx 0;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));


    .inputView {
      width: 100%;
      // border: 2rpx solid #333;
      background: #FFFFFF;
      // border-radius: 20rpx;

    }
  }

  .btn {
    width: 100%;
    height: 78rpx;
    background: #ffffff;
    border-radius: 20rpx;
    border: 2rpx solid #333333;

    .btn_icon {
      width: 40rpx;
      height: 40rpx;
      font-size: 20rpx;
      background-color: #333;
    }
  }
}

.play {
  position: absolute;
  width: 56rpx;
  height: 56rpx;
  top: calc(50% - 15rpx);
  left: calc(50% - 15rpx);
  z-index: 999;
  border-radius: 50%;
  background: rgba(175, 175, 175, 0.9);
  // background: rgba(255, 255, 255, 0.8);
  // background-color: #000000;

  // backdrop-filter: blur(30rpx);
  // 	-webkit-backdrop-filter: blur(30rpx);

  // opacity: 0.8;
  .play_icon {
    width: 26rpx;
    height: 26rpx;
    margin-left: 6rpx;
    flex-shrink: 0;
  }
}

.playNo {
  opacity: 0;
}

.popup {
  height: 860rpx;

  //border: 2rpx solid red;
  .huifu {
    width: 128rpx;
    height: 58rpx;
    background: #333333;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}

.bgdColor {
  background: #ebebeb;
}

.list_box {
  box-sizing: border-box;
  overflow: hidden;
  height: auto;
  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

  .name {
    box-sizing: border-box;
    color: #999;
    font-size: 26rpx;
    margin-top: 20rpx;
  }

  .close {
    background: #f8f8f8;
    width: 90%;
    margin: 0 auto;
    border-radius: 20rpx;

  }

  &_item {
    padding: 30rpx 0;
    width: 100%;
    text-align: center;
    color: #333;
    font-size: 30rpx;
    font-weight: 800;
    box-sizing: border-box;
    border-bottom: 2rpx solid #f1f1f1;

  }
}
</style>
